<!--
 * @Descripttion: 部门管理
 * @version: 
 * @Author: 淏
 * @Date: 2023-11-24 13:06:01
 * @LastEditors: 淏
 * @LastEditTime: 2024-05-05 18:29:46
-->
<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i style="color: #00ffff" class="el-icon-office-building"></i>
          <span style="color: #00ffff">部门管理</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <div style="display: inline-flex">
          <el-input
            size="mini"
            v-model="query.departmentName"
            placeholder="输入部门名称查询"
            class="handle-input mr10"
          ></el-input>
          <el-button
            size="mini"
            type="primary"
            class="button"
            icon="el-icon-search"
            style="margin-left: 10px; width: 120px"
            plain
            @click="handleSearch"
            v-waves
          >
            搜索
          </el-button>
          <el-button
            size="mini"
            type="success"
            class="button"
            icon="el-icon-circle-plus-outline"
            style="margin-left: 10px; width: 120px"
            plain
            @click="handleAdd"
            v-waves
          >
            新增部门
          </el-button>
        </div>
      </div>
      <!-- 表格数据-->
      <div class="ms-table" v-if="pageData.total != 0">
        <u-table :data="tableData" border style="width: 100%">
          <u-table-column
            align="center"
            fixed
            prop="id"
            label="部门id"
            width="150"
          ></u-table-column>
          <u-table-column
            align="center"
            prop="name"
            label="部门名称"
          ></u-table-column>
          <u-table-column
            align="center"
            prop="createTime"
            label="录入时间"
            show-overflow-tooltip
            width="300"
          ></u-table-column>
          <u-table-column
            align="center"
            prop="updateTime"
            label="修改时间"
            show-overflow-tooltip
            width="300"
          ></u-table-column>
          <u-table-column align="center" fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row)"
                type="warning"
                size="mini"
                plain
                v-waves
                class="vButton"
              >
                编辑
              </el-button>
              <el-button
                @click="handleDelete(scope.row)"
                type="danger"
                size="mini"
                plain
                v-waves
                class="vButton"
              >
                删除
              </el-button>
            </template>
          </u-table-column>
        </u-table>
      </div>
      <transition name="slide-left" v-if="pageData.total == 0">
        <div style="margin-top: 10vh; text-align: center">
          <el-image
            style="width: 300px; height: 300px"
            :src="require('@/assets/img/null.png')"
          ></el-image>
          <br />
          <span class="text">暂无数据，请先录入数据</span>
        </div>
      </transition>
      <!-- 表格分页  -->
      <div class="pagination" v-if="pageData.total != 0">
        <pagination
          :total="pageData.total"
          :page="pageData.page"
          :size="pageData.size"
          @sizeChange="sizeChange"
          @pageChange="pageChange"
        ></pagination>
      </div>
    </div>
    <!--信息新增与编辑  -->
    <departmentData
      ref="departmentData"
      :chooseData="chooseData"
      @getTableData="handleSearch"
    ></departmentData>
  </div>
</template>

<script>
  import { select_department, del_department } from '@/api/index.js'
  import pagination from '@/components/public/pagination.vue'
  import departmentData from './components/departmentData.vue'
  export default {
    // 组件名称
    name: 'departmentIndex',
    // 组件参数 接收来自父组件的数据
    props: {},
    // 局部注册的组件
    components: { pagination, departmentData },
    // 组件状态值
    data() {
      return {
        query: {
          departmentName: '',
        },
        pageData: {
          total: 0,
          size: 20,
          pages: 1,
        },
        tableData: [],
        chooseData: '',
      }
    },
    // 计算属性
    computed: {},
    // 侦听器
    watch: {},
    // 组件方法
    methods: {
      /**
       * @description 页面基础函数 包括页面数据获取、搜索按钮/excel导出等
       * @author haoChen 15239820820@163.com
       * @export
       * @param {}
       * @return {}
       */
      handleSearch() {
        this.getData()
      },
      handleAdd() {
        let type = 'add'
        this.$refs['departmentData'].showDialog(type)
      },
      handleClick(val) {
        let chooseData = val
        let type = 'update'
        this.$refs['departmentData'].showDialog(type, chooseData)
      },
      getData() {
        let params = new URLSearchParams()
        let departmentName = this.query.departmentName
        let currentPage = this.pageData.pages
        let size = this.pageData.size
        params.append('departmentName', departmentName)
        params.append('currentPage', currentPage)
        params.append('size', size)
        select_department(params).then((res) => {
          this.tableData = res.data.records
          this.pageData.total = res.data.total
          this.pageData.pages = res.data.current
          this.pageData.size = res.data.size
        })
      },
      handleDelete(val) {
        this.$confirm('此操作将永久删除该部门信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            let departmentId = val.id
            var qs = require('qs')
            var data = qs.stringify({
              departmentId: departmentId,
            })
            del_department(data)
              .then((res) => {
                this.$loading.close()
                this.$notify({
                  title: '删除成功！',
                  message: res.message,
                  type: 'success',
                })

                this.handleSearch()
              })
              .catch((err) => {
                this.$loading.close()
              })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除',
            })
          })
      },
      /**
       * @description 组件方法
       * @author haoChen 15239820820@163.com
       * @export
       * @param {}
       * @return {}
       */
      sizeChange(row) {
        this.pageData.size = row
        this.handleSearch()
      },
      pageChange(row) {
        this.pageData.pages = row
        this.handleSearch()
      },
    },
    created() {},
    mounted() {
      this.getData()
    },
  }
</script>

<style scoped>
  .pagination {
    float: left;
  }
  .handle-box {
    margin-bottom: 20px;
  }
  .handle-select {
    width: 200px;
  }

  .handle-input {
    width: 200px;
    display: inline-block;
  }
  .mr10 {
    margin-right: 10px;
  }
  .button {
    background: rgba(0, 0, 255, 0.2);
    border-radius: 10px;
    border: 1px solid #295a85;
    color: #00ffff;
    text-shadow: 0 0 25px #00ffff;
    font-weight: 700;
  }
  .text {
    color: #00ffff;
    font-weight: 500;
  }
</style>
<style lang="less" scoped>
  /deep/.el-dialog {
    border-radius: 5px;
    background: rgba(48, 89, 224, 0.8);
  }
  /deep/.el-dialog__headerbtn .el-dialog__close {
    color: #ffffff;
  }
</style>
<style lang="less" scoped>
  .ms-table {
    border-radius: 5px;
    background: rgba(48, 89, 224, 0.3);
    overflow: hidden;
  }
  /*最外层透明*/
  .ms-table /deep/ .el-table,
  .ms-table /deep/ .el-table__expanded-cell {
    background-color: transparent;
    color: white;
  }
  /* 表格内背景颜色 */
  .ms-table /deep/ .el-table th,
  .ms-table /deep/ .el-table tr,
  .ms-table /deep/ .el-table td {
    background-color: transparent !important;
    //表格字体颜色
    color: #ffffff;
  } /* 表格表头字体颜色 */
  /deep/ .el-table thead {
    color: #44d3e4;
    font-weight: 500;
  }
  /deep/ .el-pagination__editor.el-input .el-input__inner {
    background: transparent;
    border: 1px solid #295a85;
    color: #fff;
  }
  /deep/ .el-pagination__total,
  /deep/ .el-pagination__jump {
    color: #fff;
  }
  .vButton {
    background: rgba(0, 242, 255, 0.2);
    border-radius: 10px;
    border: 1px solid #207be0;
    color: #00ffff;
    text-shadow: 0 0 25px #00ffff;
    font-weight: 700;
  }
</style>
